<template>
    <el-card class="card">
        <span class="pbtn"></span>
        <span style="font-size: 20px;">标签管理</span>
        <el-form>
            <el-form-item>
                <el-col span="12" style="display: flex;margin-top: 20px;">

                    <el-input size="large" v-model="lableList.searchKey" placeholder="请输入搜素关键信息">

                    </el-input>

                    <el-button type="primary" @click="searchKey"
                        style="margin-left: 10px;line-height: 40px;vertical-align: center; height: 35px;margin-top: 2.5px;">
                        <el-icon>
                            <Search />
                        </el-icon>

                    </el-button>
                    <el-button type="danger" @click="resetKey"
                        style="margin-left: 10px;line-height: 40px;vertical-align: center; height: 35px;margin-top: 2.5px;">
                        <el-icon>
                            <Delete />
                        </el-icon>
                    </el-button>
                </el-col>
                <el-col span="12" style="margin-left:50%;">
                    <el-button @click="saveLable" style="width: 120px;height:50px;border-radius: 20px;"
                        type="primary">新增标签</el-button>
                </el-col>
            </el-form-item>
        </el-form>
        <el-table :data="res.result" stripe style="width: 100%">
            <el-table-column prop="id" align="center" label="编号" width="350" />
            <el-table-column prop="name" align="center" label="标签名称" width="150" />
            <el-table-column prop="cname" align="center" label="添加人" width="150" />
            <el-table-column prop="lastModifyTime" align="center" label="最后修改时间" width="180" />
            <el-table-column prop="flag" align="center" label="使用状态" width="00">
                <template #default="scope">
                    <!-- style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" -->
                    <el-switch @click="changeFlag(scope.row)" v-model="scope.row.flag" width="60" inline-prompt
                        active-text="启动" inactive-text="禁用" />
                </template>
            </el-table-column>
            <el-table-column prop="date" align="center" label="操作" width="150">
                <template #default="scope">
                    <el-button type="primary" link @click="editLableList(scope.row)">编辑</el-button>
                    <el-button type="danger" link @click="deleteLableList(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination :list="lableList" :res="res" @changeCount="changeCount" @changePage="changePage" />
        <!--编辑对话框 -->
        <template v-if="centerDialogVisible">
            <el-dialog v-model="centerDialogVisible" :title='title' width="30%" align-center>
                <el-form :rules="rules" :data="updateLabel" ref="ruleFormRef">
                    <el-form-item label="标签名称" prop="name">
                        <el-input v-model="updateLabel.name" placeholder="请输入标签"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="centerDialogCancel">取消</el-button>
                        <el-button type="primary" @click="centerDialogsubmit">
                            确定
                        </el-button>
                    </span>
                </template>

            </el-dialog>
        </template>
        <!-- 新增对话框 -->
    </el-card>
</template>

<script lang='ts' setup>
import api from '@/api'
import { onMounted, reactive, ref, markRaw } from 'vue'
import { LabelSearchType, LabelReaultType, updateLabelNameType, updateStatusType, saveLabelType } from '@/types/ccc/lable'
import Pagination from '@/views/ccc/Pagination.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { QuestionFilled, Search, Delete } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '请输入标签名称', trigger: 'blur' },
    ]
})

const lableList = reactive<LabelSearchType>({
    searchKey: '',
    page: 1,
    count: 10
})
const res = reactive<LabelReaultType>({
    total: 0,
    totalPage: 0,
    result: []
})
const getLabelBySearch = async () => {
    const result = await api.systemSetting.label.getLabelBySearchApi(lableList)
    console.log(result.data.data);
    res.result = result.data.data.result
    res.result.forEach((item: any) => {
        if (item.flag) {
            item.flag = true
        } else {
            item.flag = false
        }

    })
    res.total = result.data.data.total
    res.totalPage = result.data.data.totalPage
}
// 获取标签数据
onMounted(() => {
    getLabelBySearch()
})
// 修改状态
const status = reactive<updateStatusType>({
    id: '',
    flag: ''
})
const changeFlag = async (item: any) => {
    status.id = item.id
    if (item.flag) {
        // 1
        item.flag = '1'
        status.flag = item.flag
    } else {
        // 0 
        item.flag = '0'
        status.flag = item.flag
    }
    console.log(status);
    const result = await api.systemSetting.label.updateStatusApi(status)
    console.log(result.data);
    if (result.data.code === 200) {
        ElMessage.success(result.data.msg)
    } else {
        ElMessage.warning(result.data.msg)
    }
    getLabelBySearch()
}
const centerDialogVisible = ref<boolean>(false)
const updateLabel = reactive<updateLabelNameType>({
    id: '',
    name: ''
})
// const lableName = ref<string>('')
interface RuleForm {
    name: string
}
// 模糊查找
const searchKey = () => {
    console.log(lableList.searchKey);
    getLabelBySearch()
}
// 清除搜索
const resetKey = () => {
    lableList.searchKey = ''
    getLabelBySearch()
}
// 点击-编辑
const editLableList = (item: any) => {
    centerDialogVisible.value = true
    title.value = '编辑标签'

    // console.log(item.id, item.name);
    updateLabel.id = item.id
    updateLabel.name = item.name
    // lableName.value = item.name
}
// 标签标题
const title = ref<string>('')
// 新增表单中的数据
const saveLableList = reactive<saveLabelType>({
    name: '',
    creatorId: '',
    lastModifyTime: '',
    status: '',
    flag: '',
})
// 点击--添加
const saveLable = () => {
    centerDialogVisible.value = true
    updateLabel.name = ''
    title.value = '添加标签'
    console.log(saveLableList);
}
//表单提交
const centerDialogsubmit = async () => {
    if (title.value === '编辑标签') {
        if (updateLabel.name !== '') {
            const result = await api.systemSetting.label.updateLabelNameApi(updateLabel)
            console.log(result.data);
            if (result.data.code === 200) {
                ElMessage.success(result.data.msg)
            } else {
                ElMessage.warning(result.data.msg)
            }
        } else {
            ElMessage.warning('请输入标签名称')
        }
    } else if (title.value === '添加标签') {
        if (updateLabel.name !== '') {
            saveLableList.creatorId = localStorage.getItem('user_id')
            saveLableList.name = updateLabel.name
            saveLableList.lastModifyTime = new Date().toLocaleString()
            saveLableList.flag = '1'
            const result = await api.systemSetting.label.saveLabelApi(saveLableList)
            console.log(result.data);
            if (result.data.code === 200) {
                ElMessage.success(result.data.msg)
            } else {
                ElMessage.warning(result.data.msg)
            }
        }
        else {
            ElMessage.warning('请输入标签名称')
        }

    }
    getLabelBySearch()
    centerDialogVisible.value = false
}





// 取消
const centerDialogCancel = () => {
    centerDialogVisible.value = false
}
//删除
const deleteLableList = (id: string) => {
    ElMessageBox.confirm(
        '删除后无法恢复，确定要删除此条角色吗？',
        '删除确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            icon: markRaw(QuestionFilled)
        }
    )
        .then(async () => {
            const result = await api.systemSetting.label.delLabelByIdApi(id)
            console.log(result.data);
            if (result.data.code === 200) {
                ElMessage.success(result.data.msg)
            } else {
                ElMessage.warning(result.data.msg)
            }
            getLabelBySearch()

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })

}
// 修改当前页数
const changeCount = (arg: number) => {
    lableList.count = arg
    getLabelBySearch()
}
// 修改当前页数
const changePage = (arg: number) => {
    lableList.page = arg
    getLabelBySearch()
}

</script>

<style lang='scss' scoped>
.card {
    width: 1150px;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    min-height: 100vh;
}

.pbtn {
    display: inline-block;
    width: 8px;
    height: 18px;
    border-radius: 20px;
    background-color: #409eff;
    margin-right: 10px;
}

.class {
    width: 1150px;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    min-height: 100vh;
}
</style>